<template>
    <div id="toubiaoPage">
        <el-form label-position="top">
            <el-row :gutter="10">
                <el-col :span="24">
                    <el-form-item label="选择有权限的投标项目" required>
                        <span style="color: #838892; font-size: 12px;">
                            确认报名后才可进行投标，没有项目则表示无参与投标权限。<br/>
                            在规定时间内可多次投标，以最后一次投标为最终投标。
                        </span><br/>
                        <el-button plain icon="el-icon-s-management" class="bt_user" @click="handleAdd">
                            选择数据
                        </el-button>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <div class="is-compact">
                        <div class="plpl">
                            <el-col :span="2">招投标项目编号</el-col>
                            <el-col :span="22">
                                <el-input placeholder="暂无内容" :disabled="true" v-model="form.pcmBiddingInviteTenders.projectNumber"/>
                            </el-col>
                        </div>
                        <div class="plpl">
                            <el-col :span="2">项目名称</el-col>
                            <el-col :span="22">
                                <el-input placeholder="暂无内容" :disabled="true" v-model="form.pcmBiddingInviteTenders.projectName"/>
                            </el-col>
                        </div>

                    </div>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="本次投标时间">
                        <span style="color: #838892; font-size: 12px;">
                            需在投标开始和结束时间之内才可投标。
                        </span><br/>
                        <el-input placeholder="暂无内容" :disabled="true" v-model="currentTimeString"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="投标资格校验" v-if="form.pcmBiddingInviteTenders.projectStatus!=null">
                        <el-input placeholder="暂无内容" :disabled="true" v-model="zigeShenSel.text"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="投标开始时间">
                        <el-input placeholder="暂无内容" :disabled="true" v-model="form.pcmBiddingInviteTenders.biddingStartTime"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="投标结束时间">
                        <el-input placeholder="暂无内容" :disabled="true" v-model="form.pcmBiddingInviteTenders.biddingEndTime"/>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="招投标详情">
                        <div id="bmbalademandList">
                            <el-table  max-height="434" :data="form.touBiaoList">
                                <el-table-column label="项目名称" align="left" prop="pcmBiddingInviteTenders.projectName" width="150">
                                </el-table-column>
                                <el-table-column label="招投标需求明细" align="center">
                                    <el-table-column label="产品编号" align="left" width="150">
                                        <template slot-scope="scope">
                                        <div v-for="(item,index) in scope.row.pcmApplicationDetailList" :key="index">
                                            {{ item.pcmMaterialRecord.productNumber }}
                                        </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="产品名称" align="left" width="140">
                                        <template slot-scope="scope">
                                        <div v-for="(item,index) in scope.row.pcmApplicationDetailList" :key="index">
                                            {{ item.pcmMaterialRecord.productName }}
                                        </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="单位" align="left" width="150">
                                        <template slot-scope="scope">
                                            <dict-tag v-for="(item,index) in scope.row.pcmApplicationDetailList" :key="index" :options="dict.type.sys_unit" :value="item.pcmMaterialRecord.unit"/>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="需求数量" align="left" prop="item.requiredQuantity" width="120">
                                        <template slot-scope="scope">
                                        <div v-for="(item,index) in scope.row.pcmApplicationDetailList" :key="index">
                                            {{ item.requiredQuantity }}
                                        </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="期望到货时间" align="left" prop="item.expectedDeliveryDate" width="150">
                                        <template slot-scope="scope">
                                        <div v-for="(item,index) in scope.row.pcmApplicationDetailList" :key="index">
                                            {{ item.expectedDeliveryDate }}
                                        </div>
                                        </template>
                                    </el-table-column>
                                </el-table-column>
                                <el-table-column label="供应商资格要求" align="left" width="220">
                                <p slot-scope="scope" style="font-size: 13px;margin-top: 0">
                                    {{ scope.row.pcmBiddingInviteTenders.supplierQualificationRequirements }}
                                </p>
                                </el-table-column>
                                <el-table-column label="保证金" align="left" prop="pcmBiddingInviteTenders.deposit" width="100"/>
                                <el-table-column label="采购负责人" align="left" prop="pcmBiddingInviteTenders.fzr" width="130" />
                                <el-table-column label="采购联系电话" align="left" prop="pcmBiddingInviteTenders.procurementContactNumber" width="130" />
                                <el-table-column label="报名截止时间" align="left" prop="pcmBiddingInviteTenders.registrationDeadline" width="180"/>
                                <el-table-column label="投标开始时间" align="left" prop="pcmBiddingInviteTenders.biddingStartTime" width="180"/>
                                <el-table-column label="投标结束时间" align="left" prop="pcmBiddingInviteTenders.biddingEndTime" width="180"/>
                                <el-table-column label="评标截止时间" align="left" prop="pcmBiddingInviteTenders.evaluationDeadline" width="180"/>
                                <el-table-column label="计划开标时间" align="left" prop="pcmBiddingInviteTenders.plannedBidOpeningTime" width="180"/>
                            </el-table>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="投标">
                        <div id="pingbiaoGz">
                            <el-table :data="list" border :row-class-name="rowPcmEvaluationRuleIndex">
                                <el-table-column fixed="left" align="center" prop="index" width="90"/>
                                <el-table-column label="评估项" align="left" prop="pcmEvaluationRule.evaluationItem" width="150"/>
                                <el-table-column label="评分详情及标准" align="left" prop="pcmEvaluationRule.scoreDetailsAndStandards"  width="300"/>
                                <el-table-column label="最高分" align="left" prop="pcmEvaluationRule.maximumScore" width="120"/>
                                <el-table-column label="投标内容概述" align="left" width="300" required>
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.bidContentSummary"/>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-col :span="12">
                        <el-form-item label="上传投标书" required>
                            <el-upload
                            drag
                            class="upload-demo"
                            :action="baseApi + '/file/uploadMinio'"
                            :headers="token"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            list-type="picture"
                            multiple
                            ref="uploadBidDocs"
                            >
                            <!--  :file-list="fileList" -->
                            <el-button size="medium" type="text" style="color: #00b899"
                                >选择</el-button
                            >
                            <span style="color: #b5b8be; margin-left: 10px"
                                >拖拽或粘贴文件，单个20MB以内</span
                            >
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-col>
            </el-row>
            <el-footer>
                <el-button type="success" @click="touBiaoSub">提交</el-button>
            </el-footer>
        </el-form>

        <!-- 申请明细对话框 -->
    <el-dialog title="选择数据" :visible.sync="applicationdetail" width="800px">
      <el-form ref="queryFormDetail" size="small" :model="detaiList" :inline="true" v-show="showSearch">
        <el-form-item>
          <el-input placeholder="搜索数据" v-model="detaiList.textWen" clearable @keydown.enter.native.prevent="handleQueryDetail" />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQueryDetail"
            >搜索</el-button
          >
          <el-button
            icon="el-icon-refresh"
            size="mini"
            @click="resetQueryDetail"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
      <div id="xmxqla">
        <el-table
          v-loading="appDetail"
          highlight-current-row
          :data="projectList"
          @row-click="handleSelectionChange"
          @row-dblclick="handleSelectiondblClick"
          border
          style="width: 100%"
          max-height="360"
        >
          <el-table-column width="58" align="center" fixed="left">
            <template slot-scope="scope">
              <el-radio
                :label="scope.row.middleId"
                v-model="middleId"
              ></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="招投标项目编号" align="left" width="170" prop="projectNumber"/>
          <el-table-column label="项目名称" align="left" width="160" prop="projectName"/>
          <el-table-column width="370" />
        </el-table>
      </div>
      <pagination
        v-show="tableDataTotal > 0"
        :total="tableDataTotal"
        :page.sync="detaiList.pageNum"
        :limit.sync="detaiList.pageSize"
        @pagination="handleQuery"
      />
    </el-dialog>
    </div>
</template>

<script>
import { getToken } from "@/utils/auth.js";
import { selByUserId,selByMiddleIdTouBio,supplierBidding } from "@/api/bidding/bidPage"
import dict from "@/utils/dict";
export default {
    dicts: [
    "pcm_supplier_states",
    "sys_type_purchase",
    "demand_line_status",
    "sys_unit",
    "sys_sup_cat",
    "pcm_projectstatus",
  ],
    computed: {
        token() {
            return {
                Authorization: `Bearer ${getToken()}`,
            };
        },
        zigeShenSel(){
            var obj = {};
            console.log(this.form.pcmBiddingInviteTenders.projectStatus);
            if(this.form.pcmBiddingInviteTenders.projectStatus!='2'){
                obj.status = 0;
                obj.text = "不在投标时间内，您无法投标";
                return obj;
            }else{
                obj.status = 1;
                obj.text = "在投标时间内，您可以继续投标";
            }
            return obj;
        },
    },
    data() {
        return{
            baseApi: process.env.VUE_APP_BASE_API,
            list:[{"pcmEvaluationRule":{"evaluationItem":"暂无内容","scoreDetailsAndStandards":"暂无内容","maximumScore":"暂无内容"}}],
            form:{
                touBiaoList:[],
                fileList:[],
                pcmBiddingInviteTenders:{},
            },
            //当前时间
            currentTimeString:'',
            applicationdetail:false,
            //招标项目表格加载特效
            appDetail: false,
            //招标明细条件
            detaiList: {
                pageNum: 1,
                pageSize: 10,
                textWen: null,
            },
            //招标选中的项目ID
            middleId: 0,
            //弹框的招标项目明细
            projectList:[],
            // 显示搜索条件
            showSearch: true,
            //招标明细条数
            tableDataTotal: 0,
        }
    },
    created(){
        this.currentTimeString = new Date().toLocaleString().replace(/\//g, '-');
    },
    methods:{
        touBiaoSub(){
            console.log("this.form",this.form);
            var obj = {};
            obj.fileList = this.form.fileList;
            obj.pcmEvaluationRuleDetailList = this.list;
            obj.middleId = this.middleId;
            console.log("obj",obj);
            if(this.zigeShenSel.status==0){
                this.$message({
                    showClose: true,
                    message: this.zigeShenSel.text,
                    type: 'warning'
                });
            }else{
                console.log("this.form",this.form);
                var obj = {};
                obj.fileList = this.form.fileList;
                obj.pcmEvaluationRuleDetailList = this.list;
                obj.middleId = this.middleId;
                console.log("obj",obj);
                supplierBidding(obj).then(response=>{
                    console.log("response",response);
                    if(response.code==200){
                        this.$message({
                            showClose: true,
                            message: "投标成功",
                            type: 'success'
                        });
                        this.$tab.refreshPage({
                          path: '/bidding/bidPage'
                        })
                    }else{
                        this.$message({
                            showClose: true,
                            message: "投标失败!",
                            type: 'error'
                        });
                    }
                })
            }

        },
        handleAdd(){
            this.applicationdetail=true;
            this.handleQueryDetail();
        },
        handleQuery() {
            this.appDetail = true;
            selByUserId(this.detaiList).then((response)=>{
                this.projectList = response.rows;
                this.tableDataTotal = response.total;
                this.appDetail = false;
            });
        },
        // 招标明细单选框选中数据
        handleSelectionChange(selection) {
            this.middleId = selection.middleId;
        },
        handleSelectiondblClick(selection) {
            this.form.touBiaoList = [];
            selByMiddleIdTouBio(selection.middleId).then(response=>{
                console.log("response",response);
                this.form.touBiaoList.push(response);
                this.form.pcmBiddingInviteTenders=response.pcmBiddingInviteTenders;
                this.list = response.pcmEvaluationRuleDetailList.map(item=>{
                    item.bidContentSummary='';
                    return item;
                });
            })
            this.applicationdetail = false;
        },
        /** 评标规则序号 */
        rowPcmEvaluationRuleIndex({ row, rowIndex }) {
            row.index = rowIndex + 1;
        },
        //查询招标明细
        handleQueryDetail() {
            this.detaiList.pageNum = 1;
            this.handleQuery();
        },
        //招标明细重置
        resetQueryDetail() {
            this.detaiList.textWen = null;
            this.handleQueryDetail();
        },
        handleSuccess(response, file, fileList) {
            console.log("response", response);
            let obj = {};
            obj.attachmentName = decodeURIComponent(response.data.name);
            obj.attachmentAddress = response.data.url.substring(0, response.data.url.lastIndexOf("/") + 1);
            console.log(obj);
            this.form.fileList.push(obj);
        },
        handleRemove(file, fileList) {
            console.log(file,fileList);
            this.form.fileList = this.form.fileList.filter(
                (item) => item.attachmentName != decodeURIComponent(file.response.data.name)
            );
        },
    },
}
</script>

<style scoped>
#xmxqla >>> .el-table .cell{
    color: #141e31;
    font-size: 13px;
    margin: 4px 0;
}

#xmxqla >>> .el-table tr{
    cursor: default;
}
#xmxqla >>> .el-table--medium .el-table__cell{
    height: 30px;
}

::v-deep .el-radio__label {
  display: none;
}
::v-deep .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
    height: 30px;
}
.el-footer >>> {
  border-top: 1px dashed #e1e3e5;
  width: 100%;
  position: fixed;
  z-index: 1000;
  bottom: 0px;
  padding-top: 10px;
  margin-left: -20px;
  background-color: white;
}
.el-footer .el-button--medium >>> {
  width: 128px;
  height: 32px;
}
::v-deep .el-upload-dragger {
  width: 354px;
  height: 38px;
  text-align: left;
  padding-left: 30px;
  border-radius: 2px;
  margin-bottom: 4px;
}
::v-deep .el-upload-list--picture .el-upload-list__item-thumbnail {
  position: relative;
}
::v-deep .el-upload-list--picture .el-upload-list__item-thumbnail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('http://8.130.88.144:9000/xinghai/lala.jpg');
  background-size: cover;
  /* 其他样式，根据需要自行调整 */
}

::v-deep .el-upload-list--picture .el-upload-list__item-thumbnail{
  width: 40px;
  height: 40px;
}

::v-deep .el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name{
  margin-left: -20px;
  line-height:44px;
  padding-left:0px;
}
::v-deep .el-upload-list {
  margin-top: -16px;
}
/* ::v-deep .el-upload-list--picture .el-upload-list__item-thumbnail {
  width: 38px;
  height: 38px;
} */
::v-deep .el-upload-list--picture .el-upload-list__item {
  height: 52px;
  border-radius: 4px;
  padding: 6px 10px 10px 88px;
  background-color: #f5f6f8;
}
::v-deep .el-upload-list--picture .el-upload-list__item-name{
  margin-top: 6px;
  margin-left: -24px;
}
::v-deep .el-upload-list--picture .el-upload-list__item-name i{
  font-size: 40px;
  margin-top: -4px;
}
#pingbiaoGz >>> .el-input{
    margin-left: -4px;
    width: 289px;
}
#pingbiaoGz >>> .el-input--medium .el-input__inner{
    margin: 4px 0;
    height: 30px;
    line-height: 30px;
}
#pingbiaoGz >>> .el-table .cell{
    font-size: 13px;
}
#pingbiaoGz >>>.el-table .el-table__header-wrapper th, >>> .el-table .el-table__fixed-header-wrapper th{
    height: 30px;
}
#toubiaoPage >>> .el-table--medium .el-table__cell{
    padding: 0;
}
#toubiaoPage >>> .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
    height: 30px;
}
/* #bmbalademandList >>> .el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th{
    color: #141e31;
} */
::v-deep .fx-subform .subform-head .subform-title{
    font-size: 13px;
}
::v-deep #bmbalademandList .cell div {
    border-bottom: 1px solid #dfe6ec;
    margin-left: -10px;
    padding-left: 10px;
}
::v-deep #bmbalademandList .cell div:last-child {
    border-bottom: 0;
}
::v-deep #bmbalademandList .el-table th.el-table__cell > .cell {
    padding-left: 10px;
    font-weight: 600;
}
::v-deep #bmbalademandList >>> .el-table--border .el-table__cell:first-child .cell {
  padding-left: 10px;
}
::v-deep #bmbalademandList .cell div {
    width: 150px;
    overflow: hidden;
    height: 50px;
    padding-top: 12px;
}
::v-deep #bmbalademandList .el-table .cell{
  padding-left:10px;
}
#toubiaoPage >>> .el-form-item{
    margin-bottom: 20px;
}
#toubiaoPage >>> .el-input.is-disabled .el-input__inner{
    color: #141e31;
}
#toubiaoPage >>> .el-col-2{
    color: #525967;
    font-weight: 400;
    font-size: 14px;
    height: 38px;
    display: grid;
    width: 72px;
    align-items: center;
}
#toubiaoPage >>> .el-input.is-disabled .el-input__inner{
    border: 0;
}
.plpl{
    content: "";
    display: table;
    clear: both;
    margin-top: 20px;
    width: 100%;
}
.is-compact{
    background: #f5f6f8;
    border-radius: 4px;
    padding: 0 12px;
    content: "";
    display: table;
    clear: both;
    width: 100%;
    margin-bottom: 20px;
}
#toubiaoPage >>> .el-form--label-top .el-form-item__label{
    padding: 0;
}
#toubiaoPage >>> .el-form-item--medium .el-form-item__content{
    line-height: 20px;
}
.bt_user {
  width: 354px;
  height: 32px;
}
#toubiaoPage{
    padding: 14px 22px;
    margin-bottom: 70px;
}
</style>

